<%@ page contentType="text/html; charset=UTF-8"%>
<link rel="stylesheet" href="css/area.css" type="text/css" >
区域设置：
<table border="1">
	<tr>
		<td>区域</td>
		<td>边角坐标1</td>
		<td>边角坐标2</td>
		<td>边角坐标3</td>
		<td>边角坐标4</td>
	</tr>
	<tr>
		<td>
			<select id="area" style="width: 65px" onchange="selectArea()" >
				<option>区域一</option>
				<option>区域二</option>
				<option>区域三</option>
				<option>区域四</option>
				<option>区域五</option>
			</select>		
		</td>
		<td>x:<input type="text" id="1X" />y:<input type="text" id="1Y" /></td>
		<td>x:<input type="text" id="2X" />y:<input type="text" id="2Y" /></td>
		<td>x:<input type="text" id="3X" />y:<input type="text" id="3Y" /></td>
		<td>x:<input type="text" id="4X" />y:<input type="text" id="4Y" /></td>
		<td><button onclick="setAreaXY()">确定</button></td>
	</tr>
</table>

<script type="text/javascript">
	selectArea();
	
	function selectArea(){
		var sc = $("#area").val();
		var areaId = 0;
		if(sc == "区域一"){
			areaId = 1;
		}else if(sc == "区域二"){
			areaId = 2;
		}else if(sc == "区域三"){
			areaId = 3;
		}else if(sc == "区域四"){
			areaId = 4;
		}else if(sc == "区域五"){
			areaId = 5;
		}
		$.post("mapAreaAction", {
			"actionType" : "getMapArea",
			"areaId" :  areaId
		}, function(data) {
			if(data != null){
				$("#1X").val(data.dot1.x);
				$("#1Y").val(data.dot1.y);
				
				$("#2X").val(data.dot2.x);
				$("#2Y").val(data.dot2.y);
				
				$("#3X").val(data.dot3.x);
				$("#3Y").val(data.dot3.y);
				
				$("#4X").val(data.dot4.x);
				$("#4Y").val(data.dot4.y);
			}else{
				$("#1X").val(0);
				$("#1Y").val(0);
				
				$("#2X").val(0);
				$("#2Y").val(0);
				
				$("#3X").val(0);
				$("#3Y").val(0);
				
				$("#4X").val(0);
				$("#4Y").val(0);
			}
		}, "json");
	}
	
	function setAreaXY(){
		var sc = $("#area").val();
		var areaId = 0;
		if(sc == "区域一"){
			areaId = 1;
		}else if(sc == "区域二"){
			areaId = 2;
		}else if(sc == "区域三"){
			areaId = 3;
		}else if(sc == "区域四"){
			areaId = 4;
		}else if(sc == "区域五"){
			areaId = 5;
		}
		
		var areaXY = "";
		var xy = $("#11X").val();
		for(var j = 1; j < 5; j++){
			areaXY+= $("#" + j +"X").val() + "," + $("#" + j +"Y").val() + ":";
		}
		$.post("mapAreaAction", {
			"actionType" : "setMapArea",
			"dotList" :  areaXY + areaId
		}, function(data) {
			if (data.success == "true") {
				alert("设置成功");
			} else {
				alert("设置失败");
			}
		}, "json");
	}



</script>